<!DOCTYPE html>
<html lang="zn-CH">

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/favicon.ico"
        type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒优购</title>
    <!-- 引入icon字体 -->
    <link rel="stylesheet" type="text/css" href="../../public/css/icon-font.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="../../public/elementUI/elementUI.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../../public/css/bascis.css">
    <link rel="stylesheet" type="text/css" href="../../public/css/animate.min.css">

    <script src="../../public/js/vue-lazyload.js"></script>
    <!-- 引入组件库 -->
    <script src="../../public/elementUI/elementUI.js"></script>

    <script src="../../public/js/axios.min.js"></script>

    <!-- 局部引入 -->
    <link rel="stylesheet" type="text/css" href="./car.css">


</head>

<body>
    <div id="app">
        <!-- header -->
        <header>
            <div class="center">
                <div class="left">
                    <div class="logo">
                        <img width="140px" v-lazy="logoUrl">
                    </div>
                    <div class="title">我的购物车</div>
                </div>
                <div class="right">
                    <el-dropdown>
                        <div class="hd-avatar">
                            <a>{{userInfo.cusNickname}}<i class="iconfont iconjiantouxia"></i></a>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <p @click="getoCar()">购物车</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="gotoPersional()">个人中心</p>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <p @click="logout()">退出</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </header>



        <div class="empty center" v-if="products.length==0">
            <div class="img"></div>
            <div class="e-info">购物车还是空的</div>
            <a href="../index/index.html">继续逛</a>
        </div>
        <div class="top center" v-if="products.length>0">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="../index/index.html">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>购物车</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <main class="center" v-if="products.length>0">


            <div class="title">
                <a class="circle" :class="{'circle-select':isAllSelect}" @click="changeSelectAll()"></a>
                <div class="all-text ">全选</div>
                <div class="product">商品信息</div>
                <div class="price">单价</div>
                <div class="num">数量</div>
                <div class="total">金额</div>
                <div class="edit">操作</div>
            </div>
            <ul>
                <li v-for="(items,i ) in products">
                    <div class="store">
                        <p>{{items.sName}}</p>
                    </div>
                    <ul>
                        <li v-for="(item,j) in items.productList ">
                            <a class="circle" :class="{'circle-select':item.select}" @click="changeSelect(i,j)"></a>
                            <div class="product">
                                <div class="img" @click="toProInfo(item.pId)">
                                    <img width="120px" height="120px" v-lazy="item.pIcon">
                                </div>
                                <p>{{item.pName}}</p>
                            </div>
                            <div class="price">{{"￥"+item.pPrice}}</div>
                            <div class="num">

                                <span class="minus " @click="minus(i,j)"><i class="el-icon-minus"></i></span>
                                <input type="text" v-model="item.pNum">
                                <span class="add" @click="add(i,j)"><i class="el-icon-plus"></i></span>

                            </div>
                            <div class="total">
                                {{"￥"+item.pPrice*item.pNum}}
                            </div>
                            <div class="edit" title="删除">
                                <i class="iconfont iconchangyonggoupiaorenshanchu" @click="changeIndex(i,j)"></i>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>

        </main>

        <div class="center" v-if="products.length>0">
            <div class="total-bar">
                <div>
                    <a class="circle" :class="{'circle-select':isAllSelect}" @click="changeSelectAll()"></a>
                    <span class="all-text ">全选</span>
                    <span>{{"已选"+selectCount+"件"}}</span>
                </div>
                <div class="total-info">
                    <div>
                        <div>合计：<span>{{"￥"+(countPrice==0?countPrice:(countPrice+10))}}</span></div>
                        <div>
                            <span>总额：</span>{{"￥"+countPrice}}<span>邮费:</span>￥10
                        </div>
                    </div>
                    <div class="button" @click="toOrder()">结算</div>
                </div>
            </div>
        </div>
        <!-- foot -->
        <footer>

            <div class="center">
                <ul>
                    <li><i class="iconfont iconpinzhibaozhang"></i><span>品质保障</span></li>
                    <li><i class="iconfont icontianmaoqitiantuihuo"></i><span>七天无理由退货</span></li>
                    <li><i class="iconfont icontesefuwu"></i><span>特色服务</span></li>
                    <li><i class="iconfont iconweibiaoti-4"></i><span>急速送达</span></li>
                </ul>

            </div>
            <div class="statement">
                <div class="center">
                    <div class="left">
                        <div class="logo ">
                            <a href="../index/index.html">
                                <img width="140px"
                                    src="https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png">
                            </a>
                        </div>
                        <p>本网站只用作学习,演示使用,不做其他用途。</p>
                        <p>网站中的商品均为虚拟商品，不做真实出售。请勿付款!</p>
                        <p style="margin-top: 20px;">©Second you buy, powered by 苗文青 2021.</p>
                    </div>
                    <div class="right">
                        <h1>相关链接</h1>
                        <a target="_blank" href="https://www.iconfont.cn/">iconfont</a>
                        <a target="_blank" href="https://element.eleme.cn/#/zh-CN">ElementUI</a>
                        <a target="_blank" href="https://cn.vuejs.org/">Vue</a>
                        <a target="_blank" href="https://shop.vivo.com.cn/">VIVO</a>
                        <a target="_blank" href="https://animate.style/">Animate</a>
                        <a target="_blank" href="https://www.xiaomiyoupin.com/">小米有品</a>
                    </div>
                </div>


            </div>



        </footer>
        <!-- 侧边栏 -->
        <el-backtop :bottom="100">
            <div class="sidebar">
                <ul>
                    <li>
                        <el-tooltip class="item" effect="dark" content="返回顶部" placement="left">
                            <i class="iconfont iconjiantoushang1"></i>
                        </el-tooltip>
                    </li>
                </ul>
            </div>
        </el-backtop>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>确定删除此商品吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="del()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
    Vue.use(VueLazyload, {
        preLoad: 1.3,
        error: '../../public/img/error.png',
        loading: '../../public/img/loading.png',
        attempt: 1
    })
    const baseUrl = 'http://182.92,221.225:8888'
    var app = new Vue({
        el: '#app',
        data: {
            userInfo: {

            },
            dialogVisible: false, //删除确认框
            indexs: {
                sIndex: 0, //当前选中商店
                pIndex: 0, //当前选中商品
            },
            logoUrl: 'https://huangshen.oss-cn-beijing.aliyuncs.com/miao-shop/name.png',
            isLogin: false,
            url1: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            products: []

        },
        mounted() {
            this.checkLogin();
            this.getData()
        },
        computed: {
            //计算总价
            countPrice() {
                let counts = 0
                for (let i = 0; i < this.products.length; i++) {
                    const t = this.products[i].productList;
                    let count = 0
                    for (let j = 0; j < t.length; j++) {
                        if (t[j].select) {
                            count += t[j].pPrice * t[j].pNum
                        }

                    }
                    counts += count

                }

                return counts;
            },
            //判断是否全选
            isAllSelect() {
                for (let i = 0; i < this.products.length; i++) {
                    const t = this.products[i].productList;
                    for (let j = 0; j < t.length; j++) {
                        if (!t[j].select) {
                            return false
                        }

                    }

                }

                return true;
            },
            //选中的数量
            selectCount() {
                let count = 0;
                for (let i = 0; i < this.products.length; i++) {
                    const t = this.products[i].productList;
                    for (let j = 0; j < t.length; j++) {
                        if (t[j].select) {
                            count += t[j].pNum
                        }

                    }

                }
                return count;
            }

        },
        methods: {
            //检查登录
            checkLogin() {
                const userInfo = sessionStorage.getItem("userInfo")
                if (null === userInfo) {
                    this.isLogin = false
                } else {
                    this.isLogin = true
                    this.userInfo = JSON.parse(userInfo)
                }
            },
            //获取数据
            getData() {
                axios.get(baseUrl + "/common/car/get?uId=" + this.userInfo.cusId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            console.log(this.products);
                            this.products = response.data.data
                            console.log(this.products);
                            if (null == this.products) {
                                this.products = []
                            }
                        } else {

                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            gotoPersional() {
                window.location.href = '../personal/personal.html';
            },
            //退出登录
            logout() {
                sessionStorage.removeItem("userInfo")
                window.location.href = '../index/index.html';
            },
            //去商品详情页
            toProInfo(pid) {
                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/product.html?' + encodeURI('pid=' + pid);
            },
            getoCar() {
                window.location.href = '../car/car.html';
            },
            //去支付页面
            toOrder() {
                let payList = []
                for (let index = 0; index < this.products.length; index++) {
                    const elements = this.products[index];
                    for (let index = 0; index < elements.productList.length; index++) {
                        const element = elements.productList[index];
                        if (element.select) {
                            let isHave = false;
                            for (let index = 0; index < payList.length; index++) {
                                const e = payList[index];
                                if (elements.sId == e.sId) {
                                    e.productList.push(element)
                                    isHave = true
                                    break;
                                }


                            }
                            if (!isHave) {
                                payList.push({
                                    sId:elements.sId,
                                    sName: elements.sName,
                                    productList:[
                                    element
                                    ]
                                    
                                })
                            }
                        }
                    }

                }


               s= btoa(encodeURI( JSON.stringify({
                    uId:this.userInfo.cusId,
                    payList:payList
                })));
                window.location.href = "../order/order.html?pros="+s 
            },

            //数量减一
            minus(sIndex, pIndex) {


                if (--this.products[sIndex].productList[pIndex].pNum < 1) {
                    this.products[sIndex].productList[pIndex].pNum = 1
                    this.$notify.error({
                        title: '错误',
                        message: '最少选择一件商品'
                    });
                }

                axios.get(baseUrl + "/common/car/num?uId=" + this.userInfo.cusId + "&pId=" + this.products[
                            sIndex].productList[pIndex].pId + "&sId=" + this.products[sIndex].sId + "&num=" +
                        this.products[sIndex].productList[pIndex].pNum)
                    .then((response) => {

                    })
                    .catch(function (error) {
                        console.log(error);
                    });


            },
            //数量加一
            add(sIndex, pIndex) {
                if (++this.products[sIndex].productList[pIndex].pNum > 10) {
                    this.products[sIndex].productList[pIndex].pNum = 10
                    this.$notify.error({
                        title: '错误',
                        message: '最多选择10件商品'
                    });
                }

                axios.get(baseUrl + "/common/car/num?uId=" + this.userInfo.cusId + "&pId=" + this.products[
                            sIndex].productList[pIndex].pId + "&sId=" + this.products[sIndex].sId + "&num=" +
                        this.products[sIndex].productList[pIndex].pNum)
                    .then((response) => {

                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            //选中状态改变
            changeSelect(sIndex, pIndex) {
                this.products[sIndex].productList[pIndex].select = !this.products[sIndex].productList[pIndex]
                    .select

                axios.get(baseUrl + "/common/car/sel?uId=" + this.userInfo.cusId + "&pId=" + this.products[
                        sIndex].productList[pIndex].pId + "&sId=" + this.products[sIndex].sId)
                    .then((response) => {

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //全选改变
            changeSelectAll() {
                for (let i = 0; i < this.products.length; i++) {
                    const t = this.products[i].productList;
                    for (let j = 0; j < t.length; j++) {
                        t[j].select = !t[j].select

                    }

                }
            },
            //删除商品
            del() {
                this.dialogVisible = false
                axios.get(baseUrl + "/common/car/del?uId=" + this.userInfo.cusId + "&pId=" + this.products[this
                        .indexs.sIndex].productList[this.indexs.pIndex].pId + "&sId=" + this.products[this
                        .indexs.sIndex].sId)
                    .then((response) => {
                        if (response.data.code == 2000) {
                            this.products[this.indexs.sIndex].productList.splice(this.indexs.pIndex, 1)
                            if (this.products[this.indexs.sIndex].productList.length === 0) {
                                this.products.splice(this.indexs.sIndex, 1)
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //修改当前选中商店和商品的下标
            changeIndex(sIndex, pIndex) {
                this.dialogVisible = true
                this.indexs.sIndex = sIndex
                this.indexs.pIndex = pIndex
            }


        },

    })
</script>





</html>